<!--
 * @Author: OBKoro1
 * @Date: 2024-09-24 14:31:40
 * @LastEditors: OBKoro1
 * @LastEditTime: 2024-09-24 14:54:21
 * @FilePath: \onemode-swj\src\views\map\cesiumBaseMapChange.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by 用户/公司名, All Rights Reserved. 
-->
<template>
  <div class="base_map_change" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
    <div v-for="(item, i) in baseMapManage" :key="i" class="base_map_item" :class="{
      base_active_item: selectBaseMap === item.layerName,
    }" v-show="showTtype || selectBaseMap === item.layerName" @click="baseMapChange(item.layerName)">
      <img class="base_map_img" :src="imageImport(item.layerName)" alt="" />

      <div class="base_map_text">{{ item.name }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineComponent, onMounted, toRefs } from "vue";

const props = defineProps(["baseMapChangeFunction", "baseMapManage"]);

onMounted(() => { });

function imageImport(imageName: string) {
  return new URL(`../../assets/mapIcon/${imageName}.png`, import.meta.url).href;
}

const selectBaseMap = ref("DT_dz"),
  showTtype = ref(false);

function baseMapChange(baseMapName: string) {
  props.baseMapChangeFunction(baseMapName);

  selectBaseMap.value = baseMapName;
}

function mouseEnter() {
  showTtype.value = true;
}
function mouseLeave() {
  showTtype.value = false;
}
</script>

<style scoped lang="less">
.base_map_change {
  position: fixed;
  right: 20px;
  top: 150px;

  .base_map_item {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 10px;
    border: 1px solid transparent;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }

    .base_map_text {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 3px 0 3px;
      text-align: center;
      color: #fff;
      background-color: #3385ff;
      font-size: 12px;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
    }
  }

  .base_map_item:hover {
    border: 1px solid #3385ff;
  }

  .base_active_item {
    float: right;
    border: 1px solid #3385ff;
  }
}
</style>
